<template>
  <div>
    <van-nav-bar
      class="vnb"
      title="排行榜"
      left-arrow
      @click-left="onBack"
    />
    <menu-bar
      class="mb"
      :menus="menus"
      :current-path="currentPath"
      :tabs-class="tabsClass"
    />
    <van-list
      class="vl"
      v-model="listLoading"
      :finished="listFinished"
      :finished-text="listFinishedText"
      :error.sync="listError"
      :error-text="listErrorText"
      :immediate-check="listImmediateCheck"
      @load="onListLoad"
    >
      <template #loading>
        <van-loading :color="rootThemeColor" type="spinner">{{ listLoadingText }}</van-loading>
      </template>
      <div class="list"
        v-for="(item, index) in videoList"
        :key="item.aid"
      >
        <span class="list-order">{{ index+1 }}</span>
        <video-item
          class="list-content"
          :aid="item.aid"
          :bvid="item.bvid"
          :author="item.author"
          :title="item.title"
          :coverPath="item.pic"
          :view="item.play"
          :danmaku="item.video_review"
          :duration="item.duration"
          :allParams="item"
          layout="ltr"
        />
      </div>
    </van-list>
  </div>
</template>

<script>
import { NavBar as VanNavBar, List as VanList, Loading as VanLoading } from 'vant'
import { apiGetRank } from '@/api/rank.js'
import MenuBar from '@/components/menu-bar/MenuBar.vue'
import VideoItem from '@/components/video-item/VideoItem.vue'
import listLoadingMixin from '@/mixins/listLoading.js'
export default {
  name: 'Rank',
  inject: ['routerConfig', 'rootThemeColor', 'rootTitle', 'rootKeyword', 'rootDescription'],
  mixins: [listLoadingMixin],
  metaInfo () {
    return {
      title: `排行榜-${this.rootTitle}`,
      meta: [
        { name: 'keywords', content: this.rootKeyword },
        { name: 'description', content: this.rootDescription }
      ]
    }
  },
  components: {
    MenuBar,
    VanNavBar,
    VanList,
    VanLoading,
    VideoItem
  },
  props: {
    id: {
      type: [Number, String]
    }
  },
  data () {
    return {
      tabsClass: 'top-menu-bar',
      totalPage: 0,
      currentPage: 1,
      pageSize: 10,
      videoSource: [],
      videoList: []
    }
  },
  computed: {
    rid () {
      let id = 0
      if (this.id) {
        id = this.id - 0
        if (id === 167) {
          id = 168
        }
      } else {

      }
      return id
    },
    currentPath () {
      return `/rank${this.id ? ('/' + this.id) : ''}`
    },
    menus () {
      const arr = []
      for (const c of this.routerConfig) {
        const { name, tid, route, hide } = c
        if (hide) {
          continue
        }
        arr.push({
          title: name === '首页' ? '全站' : name,
          path: route === '/' ? '/rank' : `/rank/${tid}`
        })
      }
      return arr
    }
  },
  watch: {
    id: {
      immediate: true,
      handler (newVal) {
        if (this.checkUrl()) {
          this.resetData()
          this.getData()
        }
      }
    }
  },
  methods: {
    checkUrl () {
      let flag = true
      if (this.rid !== 0) {
        const matchIndex = this.routerConfig.findIndex(config => config.tid === this.rid)
        if (matchIndex === -1) {
          this.$router.replace({ name: '404' })
          flag = false
        }
      }
      return flag
    },
    resetData () {
      this.listLoading = true
      this.listError = false
      this.listFinished = false
      this.totalPage = 0
      this.currentPage = 1
      this.videoSource = []
      this.videoList = []
    },
    onBack () {
      this.$router.go(-1)
    },
    getData () {
      apiGetRank({
        rid: this.rid
      }).then(res => {
        const { data: { list }, code } = res
        if (code === 0) {
          if (list.length) {
            this.totalPage = Math.ceil(list.length / 10)
            this.videoSource = list
            this.videoList.push(...this.videoSource.slice(0, 10))
          } else {
            this.listFinished = true
          }
        } else {
          this.listFinished = true
        }
      }).catch(() => {
        this.listError = true
      }).finally(() => {
        this.listLoading = false
      })
    },
    onListLoad () {
      clearTimeout(this.listTimeout)
      this.listTimeout = setTimeout(() => {
        if (this.currentPage < this.totalPage) {
          this.videoList.push(...this.videoSource.slice(this.currentPage * this.pageSize, (this.currentPage + 1) * this.pageSize))
          this.currentPage++
          if (this.currentPage === this.totalPage) {
            this.listFinished = true
          }
        }
        this.listLoading = false
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
  .vnb{
    position: sticky;
    top: 0;
    z-index: 2;
    height: rem(46px);
  }
  .vnb ::v-deep {
    .van-nav-bar__title, .van-nav-bar__arrow {
      color: $theme-color;
      font-size: rem(16px);
    }
  }
  .mb {
    position: sticky;
    top: rem(46px);
    z-index: 2;
  }
  .top-menu-bar ::v-deep .van-tab{
    flex-basis: 100/6*1% !important;
  }
  .vl{
    padding: {
      top: rem(5px);
      bottom: rem(5px);
    }
  }
  .list{
    display: flex;
    &-order{
      width: rem(30px);
      display: flex;
      align-items: center;
      text-indent: rem(8px);
      color: $color-text-regular;
      font-size: rem(14px);
      background-repeat: no-repeat;
      background-size: 60%;
      background-position: 50%;
    }
    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(3) {
      .list-order{
        text-indent: rem(999px);
      }
    }
    &:nth-child(1) {
      .list-order{
        background-image: url('~@/assets/rank1.png')
      }
    }
    &:nth-child(2) {
      .list-order{
        background-image: url('~@/assets/rank2.png')
      }
    }
    &:nth-child(3) {
      .list-order{
        background-image: url('~@/assets/rank3.png')
      }
    }
    &-content{
      flex: 1;
    }
  }
</style>
